<template>
	<view class="">
		<view class="content" v-if="flag">
			<view class="pic"><image :src="active_info.cover" mode=""></image></view>
			<view class="info">
				<view class="title">{{ active_info.name }}</view>
				<view class="date info_item">活动时间：{{ active_info.start_time_c }}至{{ active_info.end_time_c }}</view>
				<view class="area info_item">活动地址：{{ active_info.address }}</view>
			</view>
			<view class="singup">
				<view class="singup_group">
					<view class="singup_group_item">{{ active_info.club_name }}</view>
					<image src="../../static/img/group_renzheng.png" mode="widthFix"></image>
				</view>
				<view class="singup_name">团报名称：{{ teampaper.name }}</view>
				<view class="password" v-if="teampaper.open_pwd">
					<view class="left"><image src="../../static/img/group_password.png" mode=""></image></view>
					<input type="text" v-model="password" password="true" placeholder="请输入密码" />
				</view>
				<!-- 进入跑团 -->
				<image class="lo" src="../../static/img/group_example.png" mode=""></image>
				<view class="btn" @tap="togroup">进入跑团</view>
			</view>
		</view>
		<view class="no_time" v-else>
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
			<text>不在报名时间内</text>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
	</view>
</template>

<script>
import loading from '@/components/loading/loading.vue';
export default {
	components: { loading },
	data() {
		return {
			loadflag: true,
			active_info: {},
			teampaper: {},
			password: '',
			flag: false,
			id: '13',
			active_id: '64'
		};
	},
	onLoad() {},
	mounted() {
		this.getGroupInfo();
	},
	methods: {
		togroup() {
			if (this.teampaper.open_pwd) {
				if (!this.password) {
					this.toast('请输入密码');
					return false;
				}
			}
			var content = JSON.stringify(this.teampaper);
			this.ajax('group/inPage', {
				data: {
					id: this.id,
					pwd: this.password
				},
				success: res => {
					console.log(res);
					if (res.code) {
						uni.navigateTo({
							url: '/pages/index/group?id=' + this.id + '&active_id=' + this.active_id + '&content=' + content
						});
					}
				}
			});
		},
		getGroupInfo() {
			this.ajax('group/getGroupInfo', {
				data: {
					id: this.id,
					active_id: this.active_id
				},
				success: res => {
					console.log(res);
					if (!res.code) {
						this.flag = false;
						this.toast(res.msg);
						this.loadflag = false;
					} else {
						this.flag = true;
						var time = res.msg.active_info;
						time.start_time_c = time.start_time.split(' ')[0];
						time.end_time_c = time.end_time.split(' ')[0];
						this.active_info = res.msg.active_info;
						this.teampaper = res.msg.teampaper;
						var team = JSON.stringify(this.teampaper);
						uni.setStorageSync('teampaper', team);
						this.loadflag = false;
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.content {
	overflow: hidden;
}
.pic {
	margin: 0 auto;
	width: 690upx;
	height: 390upx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
	}
}
.info {
	width: calc(100% - 60upx);
	margin: auto;
	border-bottom: 2upx solid #e1e1e1;
	padding: 30upx 0;
	box-sizing: border-box;
	.info_item {
		font-size: 28upx;
		color: #999999;
		line-height: 40upx;
	}
}
.title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333333;
	font-size: 32upx;
	font-weight: bold;
	margin-bottom: 16upx;
}
.singup {
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	overflow: hidden;
	.singup_group {
		display: flex;
		align-items: center;
		margin-top: 30upx;
		.singup_group_item {
			font-size: 28upx;
			color: #333333;
			margin-right: 10upx;
		}
		image {
			width: 28upx;
		}
	}
	.singup_name {
		font-size: 32upx;
		color: #333333;
		font-weight: bold;
		margin-top: 20upx;
	}
	.password {
		width: 100%;
		height: 76upx;
		border: 2upx solid #e1e1e1;
		border-radius: 6upx;
		display: flex;
		align-items: center;
		margin-top: 30upx;
		.left {
			width: 64upx;
			height: 38upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 2upx solid #e1e1e1;
			image {
				width: 24upx;
				height: 30upx;
			}
		}
		input {
			font-size: 28upx;
			color: #333333;
			padding-left: 20upx;
		}
	}
	.lo {
		width: 537upx;
		height: 378upx;
		margin-top: 20upx;
	}
	.btn {
		width: 100%;
		height: 92upx;
		border-radius: 46upx;
		background-color: #8838d2;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 92upx;
		margin-top: -90upx;
		position: relative;
		z-index: 99;
		margin-bottom: 40upx;
	}
}
.no_time {
	width: 100%;
	overflow: hidden;
	text-align: center;
	image {
		display: block;
		margin: 100upx auto;
		margin-bottom: 20upx;
		width: 180upx;
		height: 150upx;
	}
	text {
		font-size: 28upx;
		color: #999;
	}
}
</style>
